<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>div move</title>
    <style>
    #div {
        width: 100px;
        height: 100px;
        background-color: #eee;
        position: absolute;
    }
    
    #div1 {
        width: 500px;
        height: 500px;
        background-color: #6ECBC8;position: absolute;
    }
    .border{border: 1px solid black}
    </style>
    <script>
    window.onload = function(event) {
        var odiv = document.getElementById('div');
        var disx = 0;
        var disy = 0;
        var odiv1 = document.getElementById('div1');
        odiv.onmousedown = function(event) {
            var disx = event.clientX - odiv.offsetLeft;
            var disy = event.clientY - odiv.offsetTop;

            document.onmousemove = function(event) {
                var screenx = odiv1.clientWidth - odiv.offsetWidth;
                var screeny = odiv1.clientHeight - odiv.offsetHeight;
                var x = event.clientX - disx;
                var y = event.clientY - disy;
                if (x < 20) {
                    x = 0
                };
                if (y < 20) {
                    y = 0
                };
                if (x > screenx-20) {
                    x = screenx
                };
                if (y > screeny-20) {
                    y = screeny
                }
                odiv.style.left = x + 'px';
                odiv.style.top = y + 'px';
            }
            document.onmouseup = function(argument) {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        };

    }
    </script>
</head>

<body>
    <div id="div1">
        <div id="div"></div>
    </div>
</body>

</html>
